import type { FC } from 'react';
import classNames from "classnames";
import { Radio, Switch } from "antd";
import { produce } from "immer";
import styles from '../../index.module.scss'
import contentStyle from '../../../index.module.scss'

import { batchUpdateCustomization } from '../../layout';
import ColorItem from '../../colors/colorItem';
import { useCustomizationStore } from '@/store/createStore';

interface IndexProps {

}

const Index: FC<IndexProps> = () => {
  const { updatetTitle, customization } = useCustomizationStore(state => state, (o, n) => {
    return o.customization.title === n.customization.title
  })
  const { title } = customization
  const { showIcon, style, titleBkg, showTitleStyle, showTitleBkg } = title || {}

  const onChange = (key, v) => {
    const data = produce(customization.title, (draft) => {
      draft[key] = v
    })
    updatetTitle(data)
  }
  return (<div className={classNames(styles.title)} >
    <h3 className={contentStyle.subtitle} style={{ marginBottom: '10px', marginTop: '20px' }}>标题样式
      <Switch size='small' style={{ marginLeft: '20px' }} value={showTitleStyle !== false} onChange={(e) => {
        onChange('showTitleStyle', e)
      }}/>
    </h3>
    {
      showTitleStyle !== false
        ? <>
          <div className={classNames(styles.columns)}>
            <div className={classNames(styles.item, style === 'simple' ? styles.active : '')} onClick={() => {
              onChange('style', 'simple')
            }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 49"><rect fill='currentColor' stroke='currentColor' width="44" height="9" x="20" y="20" rx="1"></rect></svg>
            </div>
            <div className={classNames(styles.item, style === 'underline' ? styles.active : '')} onClick={() => {
              onChange('style', 'underline')
            }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 49"><rect fill='currentColor' stroke='currentColor' width="48" height="9" x="20" y="16" rx="1" ></rect><path strokeLinejoin="round" strokeWidth="2" d="M20 32L68 32" fill='currentColor' stroke='currentColor'></path></svg>
            </div>
            <div className={classNames(styles.item, style === 'box' ? styles.active : '')} onClick={() => {
              onChange('style', 'box')
            }}>
              <svg viewBox="0 0 137 49" xmlns="http://www.w3.org/2000/svg"><path fill='currentColor' stroke='currentColor' strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M29 35h79M108 14v21M29 13.92h79M29 14v20.5" ></path><rect fill='currentColor' stroke='currentColor' x="47" y="20" width="44" height="9" rx="1"></rect></svg>
            </div>
            <div className={classNames(styles.item, style === 'boxleft' ? styles.active : '')} onClick={() => {
              onChange('style', 'boxleft')
            }}>
              <svg viewBox="0 0 137 49" xmlns="http://www.w3.org/2000/svg"><path fill='currentColor' stroke='currentColor' strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" d="M29 35h79M108 14v21M29 13.92h79M29 14v20.5" ></path><rect fill='currentColor' stroke='currentColor' x="34" y="20" width="44" height="9" rx="1"></rect></svg>
            </div>
            <div className={classNames(styles.item, style === 'line' ? styles.active : '')} onClick={() => {
              onChange('style', 'line')
            }}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137 49"><path fill='currentColor' stroke='currentColor' strokeLinejoin="round" strokeWidth="2" d="M20 33L100 33" ></path><rect fill='currentColor' stroke='currentColor' width="44" height="9" x="20" y="16" rx="1"></rect></svg>
            </div>
          </div>
          <div style={{ margin: '20px 0px' }}>
            <Radio.Group onChange={(e) => {
              onChange('showIcon', e.target.value)
            }} value={showIcon}>
              <Radio value={true}>展示图标</Radio>
              <Radio value={false}>隐藏图标</Radio>
            </Radio.Group>
          </div>
        </>
        : null
    }

    {
      style !== 'simple'
        ? <div style={{ marginTop: '20px' }}>
          <h1 className={contentStyle.subtitle} style={{ marginBottom: '10px', }}>标题背景色
            <Switch size='small' style={{ marginLeft: '20px' }} value={showTitleBkg !== false} onChange={(e) => {
              onChange('showTitleBkg', e)
            }}/>
          </h1>
          {
            showTitleBkg !== false
              ? <ColorItem onChange={(color) => {
                onChange('titleBkg', color)
              }} color={titleBkg || ''} style={{ left: '0' }}></ColorItem>
              : null
          }

        </div>
        : null
    }

  </div>);
}

export default Index;
